<template>
  <div class="equipment-rank" id="equipment-rank"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "EquipmentRank",
  props: {
    equipmentCount: {
      type: Array,
      default: () => []
    },
    releaseCount: {
      type: Array,
      default: () => []
    },
    xList: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    const { equipmentCount, releaseCount, xList } = this;
    const dom = document.querySelector("#equipment-rank");
    const myChart = echarts.init(dom);
    const option = {
      title: {
        text: `设备发布量排行`,
        textStyle: {
          color: "#fff",
          fontSize: 12
        },
        left: "50%",
        textAlign: "center"
      },
      tooltip: {},
      legend: {
        orient: "vertical",
        show: true,
        type: "plain",
        data: ["设备数量", "发布数量"],
        right: 10,
        textStyle: {
          color: "#fff"
        }
      },
      grid: {
        height: "70%",
        y2: "10%"
      },
      xAxis: {
        type: "category",
        data: xList,
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: 11
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff"
          }
        }
      },
      yAxis: {
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff"
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: "55%"
          }
        }
      },
      series: [
        {
          name: "设备数量",
          type: "bar",
          data: equipmentCount,
          barWidth: 10,
          itemStyle: {
            barBorderRadius: [5, 5, 0, 0],
            color: "#23c668"
          }
        },
        {
          name: "发布数量",
          type: "bar",
          data: releaseCount,
          barWidth: 10,
          itemStyle: {
            barBorderRadius: [5, 5, 0, 0],
            color: "#ff7e00"
          }
        }
      ]
    };
    myChart.setOption(option);
  }
};
</script>

<style scoped lang="less">
.equipment-rank {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 28.125vh;
  overflow: hidden;
}
</style>
